<script type="text/x-template" id="my-upload">
	<div>
		<div v-if="onlyShow">
			<el-row v-for="item in fileList">
				<el-link icon="el-icon-document" @click="handlePreview(item)" :underline="false">{{item.name}}</el-link>
			</el-row>
		</div>
		<el-upload v-else
		           :disabled="disabled"
		           :action="saveUrl"
		           :on-preview="handlePreview"
		           :on-remove="handleRemove"
		           :on-success="handleSuccess"
		           :on-error="handleError"
		           :before-upload="handleBeforeUpload"
		           :before-remove="handleBeforeRemove"
		           :on-exceed="handleExceed"
		           :file-list="fileList"
		           :list-type="listType"
		           :limit="limit"
		           :data="form">
			<div slot="trigger">
				<slot name="trigger"></slot>
			</div>
		</el-upload>
		<div v-show="loading"><i class="el-icon-loading"></i>数据加载中</div>
	</div>
</script>
<script>
	(function () {
		let props = Object.assign(Vue.options.components.ElUpload.options.props, {
			value: String,
			onlyShow: {
				type: Boolean,
				default() {
					return false;
				}
			},
		});

		Vue.component('my-upload', {
			template: '#my-upload',
			props: props,
			data() {
				return {
					loading: false,
					saveUrl: my.base + '/common/silly/saveFile',
					deleteUrl: my.base + '/common/silly/deleteFile/',
					downloadUrl: my.base + '/common/silly/downloadFile/',
					previewFileUrl: my.base + '/common/silly/previewFile/',
					getListUrl: my.base + '/common/silly/fileList/',
					previewFileType: ['.pdf', '.gif', '.jpeg', '.jpg', '.png', '.html', '.txt'],
					previewFileFlag: false,
					form: {},
					fileList: [],
					defaultUuid: myUtil.getUuid()
				}
			},
			watch: {
				value: function (n, o) {
					this.$emit('input', n);
					this.init();
				}
			},
			methods: {
				init() {
					if (!this.$slots || !this.$slots.trigger) {
						this._props.onlyShow = true;
					}
					if (this.value && this.value !== this.defaultUuid) {
						this.getFileList(this.value);
					}
				},
				getFileList(groupId) {
					let that = this;
					if (!groupId) {
						return;
					}

					that.loading = true;
					setTimeout(function () {
						my.http.get(that.getListUrl + groupId).then(function (data) {
							if (data.code === 0 && data.rows) {
								that.fileList = data.rows.map(x => {
									x.name = x.attachName;
									x.type = x.attachType;
									x.url = that.downloadUrl + x.id;
									return x;
								});
							}
							that.loading = false;
						}).catch(function (err) {
							that.$notify({
								title: '失败',
								message: err,
								type: 'warning'
							});
							that.loading = false;
						});
					}, 50)
				},
				setSaveForm() {
					this.form = Object.assign(this.form, {groupId: this.value})
				},
				handleRemove(file, fileList) {

				},
				handlePreview(file) {
					let that = this;
					if (!file.type && file.name) {
						let split = file.name.split("\.");
						file.type = "." + split[split.length - 1];
					}
					that.previewFileFlag = (file.type && that.previewFileType.indexOf(file.type.toLowerCase()) >= 0);
					if (that.previewFileFlag) {
						let open = window.open(that.previewFileUrl + file.id, "name",
							'height=600,width=600,top=100,left=400,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
						open.onload = function () {
							const fileName = file.name;
							const createTime = new Date().getTime();
							open.setInterval(() => {
								open.document.title = "🕑 " + dateUtil.timeShow(new Date().getTime() - createTime) + "【" + fileName + "】😀文件预览";
							}, 300);
						}
					} else {
						window.open(that.downloadUrl + file.id);
					}
				},
				closePreview() {
					this.previewFileFlag = false;
				},
				handleSuccess(res, file, fileList) {
					file.id = res.data.id;
					file.type = res.data.attachType;
				},
				handleError(res, file, fileList) {
					let that = this;
					that.$notify({
						title: file.name + ' 上传失败',
						message: res,
						type: 'warning'
					});
				},
				handleBeforeUpload(file) {
					if (!this.value) {
						this.value = this.defaultUuid;
					}
					this.setSaveForm();
				},
				handleBeforeRemove(file, fileList) {
					let that = this;
					return this.$confirm('确定移除文件 【' + file.name + "】 ？").then(() => {
						my.http.post(that.deleteUrl + file.id).then(function (data) {
							that.loading = false;
						}).catch(function (err) {
							that.$notify({
								title: '失败',
								message: err,
								type: 'warning'
							});
							that.loading = false;
						});
					});
				},
				handleExceed(file, fileList) {
					let that = this;
					that.$notify({
						title: '文件上传失败',
						message: '最大限制上传数量：' + that.limit,
						type: 'warning'
					});
				}
			},
			created() {
				this.init()
			}
		});

	})()
</script>



